import Vue from 'vue'
import VueRouter from 'vue-router'
import store from "@/store";

Vue.use(VueRouter)

const routes = [
  {
    path: '/login',
    name: '登录界面',
    component: () => import('../views/login.vue')
  },
  {
    path: '/register',
    name: '注册界面',
    component: () => import('../views/register.vue')
  },
  {
    path: "/404",
    name: "NotFound",
    component: () => import("../views/404.vue"),
  },
  {
    path: '/writeblog',
    name: '写博客',
    component:  () => import('@/components/blog/writeblog')
  },

  {
    path: '/manage',
    name: '前台首页',
    component: () => import('../components/front/Manage.vue'),
    redirect: "/home",
    children: [
      {
        path: '/home',
        name: '前台首页',
        component: () => import('../components/front/Home.vue'),
        redirect: "/recomandWord",
        children: [
          {
            path:'/recomandArticleOfHomeView',
            name:'推荐文章',
            component: ()=> import("@/components/blog/recomandArticleOfHomeView.vue"),
          },
          {
            path:'/recomandResourceOfHomeView',
            name:'推荐资源',
            component: ()=> import("@/components/blog/RecomandResourceOfHomeView.vue"),
          },
          {
            path: '/recomandWord',
            name: '前台首页',
            component: () => import('../components/front/recomandWord')
          },
        ]
      },
      {
        path: '/word_learn',
        name: '背单词',
        component: () => import('../components/front/word_learn')
      },
      {
        path: '/unKnowWord',
        name: '错词本',
        component: () => import('../components/front/unKnowWord')
      },

      {
        path: '/baidu',
        name: '百度',
        component: () => import('../components/front/baidu')
      },

      {
        path: '/addWord',
        name: '添加词汇',
        component: () => import('../components/front/addWord')
      },
      {
        path: '/selectWord',
        name: '单词列表',
        component: () => import('../components/front/selectWord')
      },
      {
        path: '/bloglist',
        name: '博客Blog',
        component: () => import('../components/blog/bloglist')
      },
      {
        path: '/category',
        name: '博客专题',
        component:  () => import('@/components/blog/Category')
      },
      {
        path: '/blogDetails',
        name: '博客',
        component:  () => import('@/components/blog/blogDetails')
      },
      {
        path: '/ResourceUpload',
        name: '资源上传',
        component:  () => import('@/components/blog/ResourceUpload')
      },
      {
        path: '/ResourceDownload',
        name: '资源下载',
        component:  () => import('@/components/blog/ResourceDownload')
      },
      {
        path: '/categoryDetails',
        name: '博客专题',
        component:  () => import('@/components/blog/categoryDetails')
      },
      {
        path: '/myCollection',
        name: '博客收藏',
        component:  () => import('@/components/blog/myCollection')
      },
      {
        path: '/blogPersonalCenter',
        name: '博客个人中心',
        component:  () => import('@/components/blog/blogPersonalCenter')
      },
      {
        path: '/personalCenter',
        name: 'personalCenter',
        component: () => import('../components/blog/personalCenter.vue'),
        redirect: "/newArticleOfPersonal",
        children: [
          {
            path:'/newArticleOfPersonal',
            name:'个人博客主页',
            component: ()=> import("../components/blog/PersonalView/NewArticle"),
          },
          {
            path:'/newResoucesView',
            name:'NewResoucesView',
            component: ()=> import("../components/blog/PersonalView/NewResoucesView.vue"),
          },
          {
            path:'/personalCollectView',
            name:'PersonalCollectView',
            component: ()=> import("../components/blog/PersonalView/PersonalCollectView"),
          },
        ]
      },

      {
        path: '/text',
        name: '博客测试',
        component:  () => import('@/components/blog/text')
      },
      {
        path:'/editMaterial',
        name:'EditMaterials',
        component: ()=> import("../components/blog/EditMaterials.vue"),
        children: [
          {
            path: '/userInforEdit',
            name: '编辑资料',
            component: () => import(/* webpackChunkName: "about" */ '../components/blog/EditView/UserInforEditView')
          },
          {
            path: '/setOfUserView',
            name: '账号设置',
            component: () => import(/* webpackChunkName: "about" */ '../components/blog/EditView/SetOfUserView.vue')
          },

        ]
      },
      {
        path:'/blogPersionalManage',
        name:'创作管理',
        component: ()=> import("../components/blog/blogPersionalManage.vue"),
        redirect:'/ArticleCommand',
        children: [
          {
            path: '/ArticleCommand',
            name: '文章管理',
            component: () => import(/* webpackChunkName: "about" */ '../components/blog/EditView/ArticleEditManage.vue')
          },
          {
            path: '/resourcesEditManage.vue',
            name: '资源管理',
            component: () => import(/* webpackChunkName: "about" */ '../components/blog/EditView/ResourcesEditManage.vue')
          },
        ]
      },
    ]
  },



]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})
const User = {template: '<div>User {{ $route.params.id }}</div>'}

// 提供一个重置路由的方法
export const resetRouter = () => {
  router.matcher = new VueRouter({
    mode: 'history',
    base: process.env.BASE_URL,
    routes
  })
}

// 注意：刷新页面会导致页面路由重置
export const setRoutes = () => {
  const storeMenus = localStorage.getItem("menus");
  if (storeMenus) {
    // 获取当前的路由对象名称数组
    const currentRouteNames = router.getRoutes().map(v => v.name)
    if (!currentRouteNames.includes('backManage')) {
      // 拼装动态路由
      const manageRoute = { path: '/', name: '后台管理系统', component: () => import('../components/back/backManage.vue'),  redirect: "/backHome", children: [
        ] }
      const menus = JSON.parse(storeMenus)
      menus.forEach(item => {
        if (item.path) {  // 当且仅当path不为空的时候才去设置路由
          let itemMenu = { path: item.path.replace("/", ""), name: item.name, component: () => import('../components/back/' + item.pagePath + '.vue')}
          manageRoute.children.push(itemMenu)
        } else if(item.children.length) {
          item.children.forEach(item => {
            if (item.path) {
              let itemMenu = { path: item.path.replace("/", ""), name: item.name, component: () => import('../components/back/' + item.pagePath + '.vue')}
              manageRoute.children.push(itemMenu)
            }
          })
        }
      })
      // 动态添加到现在的路由对象中去
      router.addRoute(manageRoute)
    }

  }
}

// 重置我就再set一次路由
setRoutes()


router.beforeEach((to, from, next) => {
  localStorage.setItem("currentPathName", to.name)  // 设置当前的路由名称
  store.commit("setPath")

  // // 未找到路由的情况
  if (!to.matched.length) {
    const storeMenus = localStorage.getItem("menus")
    if (storeMenus) {
      next("/404")
    } else {
      // 跳回登录页面
      next("/login")
    }
  }
  // 其他的情况都放行
  next()

})

export default router
